import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import './AdoptCenter.css';

function AdoptCenter() {
    const [pets, setPets] = useState([]);
    const [selectedType, setSelectedType] = useState('all');
    const navigate = useNavigate();

    const goToPetDetail = (pet) => {
        navigate('/pet', { state: { pet } });
    };

    useEffect(() => {
        const fetchPets = async () => {
            try {
                const response = await axios.get('http://localhost:5000/api/v1/pet/list');
                const petData = Array.isArray(response.data.data)? response.data.data : [];
                setPets(petData);
                console.log('Fetched pets:', petData);
            } catch (error) {
                console.error('Error fetching pets:', error);
            }
        };

        fetchPets();
    }, []);

    const handleTypeChange = (type) => {
        setSelectedType(type);
    };

    const filteredPets = selectedType === 'all'
      ? pets
      : pets.filter(pet => {
            if (selectedType === 'dog') {
                return pet.petTypeId === 2;
            } else if (selectedType === 'cat') {
                return pet.petTypeId === 1;
            } else if (selectedType === 'mouse') {
                return pet.petTypeId === 3;
            }
            return false;
        });

    return (
        <div className="adopt-center-container">
            <aside className="sidebar">
                {/* 添加“我要发布”按钮 */}
                <button 
                    className="publish-button" 
                    onClick={() => navigate('/petInfo')}
                >
                    *我也要发布*
                </button>
                <h2>选择宠物类型</h2>
                <ul>
                    <li
                        className={selectedType === 'all'? 'active' : ''}
                        onClick={() => handleTypeChange('all')}
                    >
                        全部
                    </li>
                    <li
                        className={selectedType === 'cat'? 'active' : ''}
                        onClick={() => handleTypeChange('cat')}
                    >
                        ^猫^
                    </li>
                    <li
                        className={selectedType === 'dog'? 'active' : ''}
                        onClick={() => handleTypeChange('dog')}
                    >
                        ∪狗∪
                    </li>
                    <li
                        className={selectedType === 'mouse'? 'active' : ''}
                        onClick={() => handleTypeChange('mouse')}
                    >
                        °鼠°
                    </li>
                </ul>
            </aside>
            <main className="pet-list-container">
                <div className="pet-list">
                    {Array.isArray(filteredPets)? (
                        filteredPets.length > 0? (
                            filteredPets.map(pet => (
                                <div key={pet.petId} className="pet-item" onClick={() => goToPetDetail(pet)}>
                                    {pet.petImages && pet.petImages.length > 0 && (
                                        <img src={pet.petImages[0]} alt={pet.petName} />
                                    )}
                                    <p>{pet.petName}</p>
                                    <p>品种: {pet.petVariety} 年龄: {pet.petAge}</p>
                                </div>
                            ))
                        ) : (
                            <p>未找到符合条件的宠物信息</p>
                        )
                    ) : (
                        <p>未找到宠物信息</p>
                    )}
                </div>
            </main>
        </div>
    );
}

export default AdoptCenter;